<script setup>

import {CloseBold} from "@element-plus/icons-vue";
import { commonIpCurrent } from '@/api/file'
const active = ref('dingyue')
const goTop = () =>{
  const element = document.getElementById('top');
  if (element) {
    element.scrollIntoView({
      behavior: 'smooth', // 平滑滚动
      block: 'start'     // 对齐到顶部
    });
  }
}

onMounted(() => {
  getIpAddress()
})

const content = ref('')
const country = ref('')
const region = ref('')
const city = ref('')

const getIpAddress = () => {
  commonIpCurrent().then(res =>{
    country.value = res.data.country
    region.value = res.data.region
    content.value = res.data.country+'-'+res.data.region;
    city.value = res.data.city
  })
}




</script>

<template>
  <aside class="sidebar">
    
    <!-- 咨询按钮 -->
    <section class="sidebar-item">
      
      <span class="item-title ip-title">当前ip</span>
      <div class="item-title ip-content line-clamp-2 text-center w-full">{{ content }}</div>
      <div class="popup-box" style="width: 200px;">
        <div class="popup-content">
          <div class="popup-info">
            <div>
              <h5>当前ip</h5>
              <h5>{{ country }}-{{ region }}-{{ city }}</h5>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 咨询按钮 -->
    <section class="sidebar-item">
      <div class="icon-wrapper">
        <img src="~/assets/images/activity/share1.png" alt="咨询">
      </div>
      <span class="item-title">咨询</span>
      <div class="popup-box">
        <div class="popup-content">
          <div class="popup-info">
            <img src="~/assets/images/logo/boss_wx.png" alt="官方微信群">
            <div>
              <h5>官方客服</h5>
              <p>扫码添加，立即咨询</p>
            </div>
          </div>
        </div>
      </div>
     
    </section>

    <!-- 加群按钮 -->
    <!-- <section class="sidebar-item">
      <div class="icon-wrapper">
        <img src="~/assets/images/logo/wx.png" alt="加群">
      </div>
      <span class="item-title">加群</span>
      <div class="popup-box">
        <div class="popup-content">
          <div class="popup-info">
            <img src="~/assets/images/logo/boss_wx.png" alt="官方微信群">
            <div>
              <h5>官方微信群</h5>
              <p>扫码添加，拉你进群</p>
            </div>
          </div>
        </div>
      </div>
    </section> -->

    <!-- 更多按钮 -->
    <section class="sidebar-item divider">
      <div class="icon-wrapper">
        <img src="~/assets/images/activity/more.png" alt="更多">
      </div>
      <span class="item-title">更多</span>
      <div class="more-box">
        <section class="more-tabs">
          <span @click="active = 'dingyue'" :class="{'active':active === 'dingyue'}">公众号</span>
          <span @click="active = 'fuwuhao'" :class="{'active':active === 'fuwuhao'}">视频</span>
          <span @click="active = 'zixun'" :class="{'active':active === 'zixun'}">跨境资讯</span>
        </section>
        <div class="more-content" :class="{'active':active === 'dingyue'}">
          <img src="~/assets/images/logo/wx.png" alt="二维码">
          <p>为你推送和解读最前沿、最有料的跨境电商资讯</p>
        </div>
        <div class="more-content" :class="{'active':active === 'fuwuhao'}">
          <img src="~/assets/images/logo/wx-video.png" alt="二维码">
          <p>9卖家都在关注的微信公众号</p>
        </div>
        <div class="more-content" :class="{'active':active === 'zixun'}">
          <img src="~/assets/images/logo/wx.png" alt="二维码">
          <p>精选今日跨境电商头条资讯</p>
        </div>
      </div>
    </section>

    <!-- 回到顶部按钮 -->
    <section class="sidebar-item scroll-top" @click="goTop">
      <div class="scroll-icon">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 6.76758V20.9871" stroke="#495057" stroke-width="1.38" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M5.6582 13.0557L12 6.71387L18.3418 13.0557" stroke="#495057" stroke-width="1.38" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M5.6582 2.4873H18.3418" stroke="#495057" stroke-width="1.38" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </div>
      <span class="item-title">回顶部</span>
    </section>
  </aside>
</template>

<style scoped>
.sidebar {
  z-index: 555;
  position: fixed;
  right: 0;
  top:calc(50% - 150px);
  width: 56px;
  background: #ffffff;
  box-shadow: 0 2px 16px #3f40500f;
  border-radius: 6px 0 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-item {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 54px;
  color: #3d3d3d;
  flex-direction: column;
  cursor: pointer;
  .ip-title{
    margin-top: 0;
  }
}

.sidebar-item:hover .item-title {
  color: #477eff;
}

.sidebar-item:after {
  content: "";
  width: 46px;
  height: 1px;
  position: absolute;
  bottom: 0;
  background: #ebebeb;
}

.sidebar-item:last-of-type:after,
.sidebar-item:nth-last-of-type(2):after {
  width: 0;
  height: 0;
}

.sidebar-item.divider:after {
  width: 46px !important;
  height: 1px !important;
}
.ip-content{
  white-space: normal!important;
}
.icon-wrapper {
  width: 24px;
  height: 24px;
  overflow: hidden;
  display: flex;
}

.icon-wrapper img,
.icon-wrapper svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scroll-icon {
  height: 24px;
  overflow: hidden;
}

.item-title {
  color: #495057;
  font-size: 11px;
  line-height: 11px;
  white-space: nowrap;
  margin-top: 5px;
  flex-shrink: 0;
}

.sidebar-item:hover:before {
  content: "";
  position: absolute;
  right: 100%;
  height: 100px;
  width: 10px;
  background: transparent;
}

/* 弹出框样式 */
.popup-box {
  display: none;
  position: absolute;
  right: calc(100% + 4px);
  background: #3265f5;
  width: 253px;
  padding: 1px;
  border-radius: 8px;
  box-shadow: #11111a0d 0 4px 16px, #11111a0d 0 8px 32px;
}

.popup-content {
  border-radius: 8px;
  padding: 8px;
  background: #f3f8fe;
  width: 100%;
}

.popup-info {
  display: flex;
  width: 100%;
  background-color: #fff;
  padding: 8px 20px 8px 6px;
  border-radius: 8px;
  position: relative;
}

.popup-info img {
  width: 78px;
  height: 78px;
  border-radius: 4px;
  margin-right: 6px;
}

.popup-info h5 {
  font-size: 15px;
  font-weight: 600;
  line-height: 18px;
  color: #3d3d3d;
  margin: 0 0 4px 0;
}

.popup-info p {
  font-size: 12px;
  line-height: 17px;
  color: #495057;
  margin: 0;
}

/* 更多按钮弹出框样式 */
.more-box {
  display: none;
  position: absolute;
  right: calc(100% + 4px);
  top: -50px;
  width: 253px;
  background: #fff;
  border-radius: 8px;
  box-shadow: #11111a0d 0 4px 16px, #11111a0d 0 8px 32px;
}

.more-tabs {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: stretch;
}

.more-tabs span {
  flex-grow: 1;
  text-align: center;
  font-size: 13px;
  line-height: 41px;
  color: #495057;
  background: #f9f9f9;
  cursor: pointer;
}

.more-tabs span.active {
  font-weight: 600;
  color: #1a1a1a;
  background: #fff;
  z-index: 1;
  text-decoration: underline;
  text-decoration-color: #00d085;
  text-decoration-thickness: 4px;
  text-underline-offset: -1px;
}

.more-content {
  display: none;
  grid-template-columns: 78px auto;
  padding: 12px 6px;
  align-items: center;
}

.more-content.active {
  display: grid;
}

.more-content img {
  width: 78px;
  height: 78px;
  border-radius: 4px;
}

.more-content p {
  font-size: 12px;
  line-height: 20px;
  color: #495057;
  opacity: 0.8;
  margin: 0;
  padding: 0 0 0 2px;
}

/* 回到顶部按钮样式 */
.scroll-top {
  padding: 0 10px;
  height: 56px;
  overflow: hidden;
  width: 56px;
  border-bottom-left-radius: 6px;
  transition: all 0.5s;
}

.scroll-top.show {
  max-height: 54px;
}

/* 悬停效果 */
.sidebar-item:hover .popup-box,
.sidebar-item:hover .more-box {
  display: block;
  animation: showPopup 0.3s ease-in-out;
}

@keyframes showPopup {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
</style>